<template>
    <div class="mark-matrix">
        <!-- 1.左侧tree -->
        <div class="word-tree" v-if="this.curStep=='3detail' && treeData.length">
            <el-tree :data="treeData" :props="defaultProps" :highlight-current=true  :default-expand-all=true   ref="tree"
               @node-click="handleNodeClick"></el-tree>
        </div>



        <!-- 2.政策列表搜索结果, 这里区域是必填 -->
        <div class="rightDiv" v-show="curStep=='2search'">


            <!-- 2.1.政策列表及搜索条件: 城市, 关键词 -->
            <div class="search-area" >
                <div class="search2">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="地域">
                            <el-select v-model="curRegion" :multiple="false" filterable placeholder="请选择" @change="region_change">
                                <el-option  v-for="(item,index) in regionList"  :key="index"  :label="item"  :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布年份">
                            <el-select v-model="searchForm.publishYear" :multiple="false" filterable clearable placeholder="请选择">
                                <el-option  v-for="(item,index) in publishYearList"  :key="index"  :label="item"  :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="批次号">
                            <el-input  v-model="searchForm.importNumber" placeholder="请输入内容"  @keyup.enter.native="handleSearch"></el-input>
                        </el-form-item>
                        <el-form-item label="标引状态">
                            <el-select v-model="searchForm.markState" :multiple="false" filterable clearable placeholder="请选择">
                                <el-option  v-for="(item,index) in markStateList"  :key="index"  :label="item.label"  :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="文本">
                            <el-input  v-model="searchForm.searchInput" placeholder="请输入内容"  @keyup.enter.native="handleSearch"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>


                <div class="table-area" v-if="isTable">
                    <el-table v-loading="listLoading" :data="tableList" border class="table" >
                        <el-table-column label="ID" prop="id" width="60"></el-table-column>
                        <el-table-column label="政策标题" prop="title" ></el-table-column>
                        <el-table-column label="发文字号" prop="number" width="80"></el-table-column>
                        <el-table-column label="发布机构" prop="publishOrgan" width="80"></el-table-column>
                        <el-table-column label="发布日期" prop="publishDate" width="100"></el-table-column>
                        <el-table-column label="入库时间" prop="createDate" width="100"></el-table-column>
                        <el-table-column label="批次号" prop="importNumber" width="120"></el-table-column>
                        <el-table-column label="标引状态" prop="_onlyshow_markState" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row._onlyshow_markState=='未完成'" style="color:#409EFF">{{scope.row._onlyshow_markState}}</span>
                                <span v-else>{{scope.row._onlyshow_markState}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="130">
                            <template slot-scope="scope">
                                <el-button @click="btn_markClick(scope.row.id)" type="text" size="small" style="margin-right:10px;">标引</el-button>
                                <!--<router-link :to="{path: '/permission/policyModify', query: {id:scope.row.id}}">
                                    <el-button type="text" size="small">修改</el-button>
                                </router-link>-->
                                <el-button @click="delPolicy( scope.row.id )" type="text" size="small" style="margin-left:10px;">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination"  v-if="isTable">
                    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTableData"/>
                </div>
            </div>
        </div><!-- rightDiv -->


        <!-- 3.政策详情及标引 -->
        <div class="rightDiv" v-show="curStep=='3detail'">

            <!-- 3.1.当前节点信息: 节点, 城市。当前框架下的关键词列表, 该条政策标引语句 -->
            <div class="cur_nodeinfo">
                <el-button @click="detailArea_back()" type="text" size="small">返回列表</el-button>
                <el-button @click="mark_done()" type="primary" size="small">标引完成</el-button>

                <el-form :inline="true">
                    <el-form-item label="地域">
                        {{curRegion}}
                    </el-form-item>
                    <el-form-item label="框架" style="margin-left:50px;">
                        {{curNode.label}}
                    </el-form-item>
                </el-form>

                <div>
                    <el-collapse v-model="collapse_activeNames" >
                        <el-collapse-item name="1">
                            <template slot="title">
                                <span style="font-weight:bold;">当前框架的关键词（{{policy_words.length}}个）</span>
                                <span style="margin-left:140px;">蓝色：未高亮。绿色：已高亮。灰色：未在全文中匹配到</span>
                            </template>

                            <el-tag :key="idx" v-for="(item, idx) in policy_words" :disable-transitions="false" :type="item._type_forSelect"
                                    closable @close="tagWordDel(idx)"
                                    @click="tagWordClick(idx)"  :title="item.keyword">
                                {{item.keyword|ellipsis}}
                            </el-tag>
                        </el-collapse-item>
                    </el-collapse>
                    <el-collapse v-model="collapse_activeNames" >
                        <el-collapse-item name="2">
                            <template slot="title">
                                <span style="font-weight:bold;">标引的语句（{{policy_statement.length}}条）</span>
                            </template>
                            <el-tag :key="idx" v-for="(item, idx) in policy_statement" closable :disable-transitions="false" :type="item._type_forSelect"
                                       @close="tagStateDel_confirm(idx)" @click="tagStateClick(idx)"  :title="item.statements">
                                {{item.statements|ellipsis}}
                            </el-tag>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>

            <div class="detailArea">
                <div  @mouseup="detailArea_getSelectText()"  v-html="cur_policy_cnt_highlight">
                </div>
            </div>


        </div><!-- rightDiv -->

    </div>

</template>

<script>

/*
使用步骤:
1.先列出所有政策列表。可进行搜索: 区域, 关键词。
2.对一条政策进行标引。 关联: 左侧树, 区域(只读)。 

*/

import {getWordsTree, countWordsInPolicy} from "@/api/words-fream-tree";
import {searchKeyByEx, searchArticle, deleteArticle, setMarkState} from "@/api/mark-policy";
import {getPolicyById} from "@/api/policy-edit";
import {addWord, addWordReal, getWordsList} from "@/api/word-manage-list";

import {getAllRegion, getMatrixList, matrixDel, matrixAdd, getPolicyListForMatrix} from '@/api/matrix'


import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
    name: "mark-matrix",
    components: {Pagination},
    filters: { 
        ellipsis(value) {
            let maxLen = 60; //70;
            if (!value) return "";
            if (value.length > maxLen) {
                return value.slice(0, maxLen) + "...";
            }
            return value;
        },
    },
    data() {
        return {
            curStep: '2search',     // 2search,3detail

            treeData:[],                    // 节点的 name用于在树上展示(要加数字), 其它地方用title(不带数字)
            curNode:{ id:0, label:''  },
            treeCountData:{},               // 树节点上的关键词, 在当前政策中出现的个数(1个关键词只计1个)

            regionList:[],
            curRegion:'',
            publishYearList:[],


            formInline:{},


            tableList: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 10
            },
            listLoading: false,
            isKeyArea: false,
            isTable: false,
            data: [],
            keyList: [],
            checkKeyList: [],
            searchForm:{
                searchInput: '',
                importNumber:'',
                publishYear:'',
            },
            defaultProps: {
              //children: 'childWordFream',
              children: 'children',
              label: 'name'
            },
            markStateList:[{value:'0',label:'未标引'}, {value:'1',label:'未完成'}, {value:'2',label:'已完成'}],     // 这里的0要用字符串格式, 在getTableData()里有判断。
            //stateList:[{value:'0',label:'未加工'}, {value:'1',label:'已加工'}, {value:'2',label:'不加工'}],         // 这里的0要用字符串格式, 在getTableData()里有判断。

            collapse_activeNames: ['1','2'],

            // 政策详情及标引
            cur_policy      : {},           
            cur_policy_id   : 0,
            cur_policy_cnt  : '',
            cur_policy_cnt_highlight  : '',     // 高亮了关键词后的 政策内容。
            policy_words    : [],        // 框架下的关键词。 [{id:1, keyword:'xx', /*wordFreamId:curNodeId*/}]
            policy_statement    : [],    // 该政策的标引语句。  [{id:1, statements:'xx'}]
            
        }
    },
    created() {
        this.getWordsTree();
        this.getAllRegion();
        for(let i=2021; i>1990; i--){
            this.publishYearList.push( i );
        }
    },
    methods: {
        // 1.左侧树
        getWordsTree() {
            this.listLoading = true;
            getWordsTree().then(res => {
                this.treeData = res.result;
                this.listLoading = false;
            });
        },
        handleNodeClick(data) {
            console.log('[handleNodeClick]', data);
            this.curNode = data;        // id:2, label:"xxx", level:2
            this.matrix_update();
        },
        /*tree_getCurNode(){
            console.log(this.$refs.tree.getCurrentNode());
            return this.$refs.tree.getCurrentNode();
        },*/

        // 2.城市列表
        getAllRegion(){
            getAllRegion().then(res => {

                // 预处理数据: 把全国放第一, 去掉null。
                if( res.result && res.result.indexOf('全国') > -1 ){
                    res.result.splice( res.result.indexOf('全国'), 1);
                    res.result.unshift('全国');
                }

                this.regionList = res.result;
                if(!this.curRegion){
                    this.curRegion = this.regionList[0] || '';
                    this.region_change();
                }
            })
        },
        region_change(){
            if(this.curStep=='2search'){
                this.handleSearch();
            }else{
                this.matrix_update();       // 应该不存在此场景
            }
        },

        // 3.政策列表
        handleSearch(){
            this.listQuery.page = 1;
            this.getTableData();
        },

        getTableData() {
            let param = {
                regions: [this.curRegion],
                //wordFreamId:[this.curNode.id],

                pageSize: this.listQuery.limit,
                pageNum: this.listQuery.page,

                importNumber: this.searchForm.importNumber,
                markState: this.searchForm.markState,
                publishYear: this.searchForm.publishYear,
            };

            if( this.searchForm.searchInput ){ param['key']=[this.searchForm.searchInput]; }

            this.listLoading = true;
            getPolicyListForMatrix(param).then(res => {
                // 数据预处理
                let markstateArr = { '0':'未标引', '1':'未完成', '2':'已完成'};
                if(!res.result.list){res.result.list=[];}

                res.result.list.forEach((item) => {
                    item._onlyshow_markState = markstateArr[item.markState];
                });
                this.tableList = res.result.list;
                this.total = res.result.total;
                this.listLoading = false;
                this.isTable = true;
            })
        },


        delPolicy(id) {
          this.$confirm("删除政策会把标引语句也删除。确定删除?", {type: "warning"}).then(() => {
            deleteArticle({id:id}).then(res => {
              this.$message({ message: '删除成功！', type: 'success' });
              this.getTableData();
            });
          }).catch(() => {})
        },

        btn_markClick(id) {
            /*if( ! (this.curNode && this.curNode.id) ){
                this.$message({ message: "请选择框架", type: "error" });
                return;
            }*/

            getPolicyById({id:id}).then(res => {
                this.cur_policy = res.result;
                this.cur_policy_id = id,
                this.cur_policy_cnt = res.result.content
                //this.policy_statement = res.result.wordFreamList

                this.curStep = '3detail';
                //this.isTable=false;

                this.matrix_update();
            })
        },



        // 4.框架下的关键词
        getWordsList(){
            this.policy_words = [];
            if( this.curNode.id ){
                let param = { wordFreamId: this.curNode.id, pageSize:100}
                //let param = { pageSize:100 }
                getWordsList(param).then(res => {
                    console.log('[getWordsList]' , res.result.list);
                    // {id:1, keyword:'xx'}
                    this.policy_words = res.result.list;

                    this.matrix_update_highlight();
                })
            }
        },



        // 5.标引语句列表(当前政策的)
        getStatementList(){
            var that=this;
            this.policy_statement = [];
            if( this.curNode.id ){
                //let param = { wordFreamId:[this.curNode.id], regions:[this.curRegion], pageSize:100}
                let param = { wordFreamId:[this.curNode.id], regions:[this.curRegion], policyId:[this.cur_policy_id], pageSize:100}
                getMatrixList(param).then(res => {
                    console.log('[matrix_update]' , res.result);
                    this.policy_statement = res.result;
                    this.matrix_update_highlight();
                })
            }else{
                // 如果左侧未选框架时, 右侧正文要显示
                this.matrix_update_highlight();
            }
        },


        // 统计各节点上, 关键词在一篇政策中出现的个数(一个关键词算1个)
        countWordsOnTree(){
            if( !this.cur_policy_id ){ return; }
            let param = { id: this.cur_policy_id }
            countWordsInPolicy(param).then(res => {
                //console.log('[countWordsOnTree]' , res.result);
                // 1.处理数据
                let treeCountData = {};
                res.result.forEach((item) => {
                    if( item.wordFream && item.wordFream.length>0 ){
                        item.wordFream.forEach((item2) => {
                            //console.log( item.keyword, item2.id );
                            if( !treeCountData[item2.id] ){ treeCountData[item2.id]=0; }
                            treeCountData[item2.id]++;
                        });
                    }
                });
                //console.log(treeCountData);
                this.treeCountData = treeCountData;
                // 2.更新tree数据
                //console.log(this.treeData);
                this.updTreeCountWord();
            })
        },

        updTreeCountWord(){
                this.treeData.forEach((item3) => {
                    this._updTreeCountWord( item3 );
                });
        },
        _updTreeCountWord( node ){
            let num=0;
            if( this.treeCountData[ node.id] ){
                num = this.treeCountData[ node.id];
            }
            node.name = node.title+'('+num+')';

            if( node.children && node.children.length > 0 ){
                node.children.forEach((item) => {
                    this._updTreeCountWord( item );
                });
            }
        },

        ///////////////////////////////////// 重要的接口 /////////////////////////////////////
        matrix_update(){
            this.getWordsList();
            this.getStatementList();
            this.countWordsOnTree();
        },

          // 在全文中高亮 框架的关键词。 在这2个都结束时执行: getWordsList, getPolicyById
        matrix_update_highlight(){
            //console.log('[matrix_update_highlight]', this.policy_words, this.cur_policy_cnt.substr(0,30));

            this.tagWord_hide_noresult();
            this.cur_policy_cnt_highlight = this.cur_policy_cnt;
        },

          // 未在全文中出现的关键词, 不显示
        tagWord_hide_noresult(){
            if( this.cur_policy_cnt && this.policy_words.length >0 ){
                this.policy_words.forEach((item) => {
                    let hasOne = this.cur_policy_cnt.indexOf(item.keyword);
                    item['_type_forSelect'] =   hasOne == -1?'info':'';
                });
                // 只显示标引中的关键词
                let res1 = this.policy_words.filter(function(item) { return item._type_forSelect != 'info' });
                this.policy_words=res1;
            }
        },

        /**
         * 高亮/取消高亮一个关键词/语句
         * @param word: 关键词/语句
         * @param status: 当前 关键词/语句 的标引状态。 ''-未高亮, success-已高亮, info-高亮但未匹配到
         * @param needJump: 是否跳到匹配后的第一个结果处。
         * return: 该 关键词/语句 的标引引状态。
         */
        highlight(word, status, needJump=false){
            // 1.先把 所有高亮标记为非最后一次。即去掉.lastHighlight
            if(1){
                this.cur_policy_cnt_highlight = this.cur_policy_cnt_highlight.replaceAll( '"highlight lastHighlight"', '"highlight"');
            }

            // 2.标引当前语句
            if( !! status ){   // 当前是选中状态
                status = '';
                this.cur_policy_cnt_highlight = this._calcHeighLightHTML_cancel(this.cur_policy_cnt_highlight, word);
            }else{
                let ret = this._calcHeighLightHTML(this.cur_policy_cnt_highlight, word);
                if( ret == this.cur_policy_cnt_highlight ){     // 未匹配到
                    status = 'info';
                }else{      // 已高亮
                    status = 'success';
                    this.cur_policy_cnt_highlight = ret;
                }
            }
            this.$forceUpdate();

            // 3.跳到 这次标引的第一个语句。
            if(needJump && status == 'success'){
                // 自动滚动到第1个高亮处。不能用id, id会直接被过滤掉。
                setTimeout(function()  {
                    try {
                        document.querySelector('.lastHighlight').scrollIntoView();
                    } catch (e) { }
                }, 100);
            }
            console.log('[highlight]', word, status);
            return status;
        },
          // 高亮一个关键词。(用于关键词 和 语句)。 只允许被highlight()调用。
        _calcHeighLightHTML(content, keyword) {
            keyword = keyword + '';
            let ret = content;
            if (!!keyword) {
              ret = content.replaceAll( keyword, '<span class="highlight lastHighlight">' + keyword + '</span>');
            }
            return ret;
        },
          // 取消一个关键词的高亮。( 仅用于 语句)。 只允许被highlight()调用。
        _calcHeighLightHTML_cancel(content, keyword) {
            keyword = keyword + '';
            let ret = content;
            if (!!keyword) {
              ret = content.replaceAll( '<span class="highlight lastHighlight">' + keyword + '</span>', keyword);
              ret = content.replaceAll( '<span class="highlight">' + keyword + '</span>', keyword);
            }
            return ret;
        },




        /////////////////////////////////////////////////// 关键词相关 ///////////////////////////////////////////////////
          // 点击一个关键词, 在全文中进行高亮。并把其它关键词取消高亮
        tagWordClick(idx){
            let obj = this.policy_words[idx];
            // 当前是未标引则标引。 当前已标引则取消标引
            if( ! obj['_type_forSelect'] ){
                // 所有的选中的关键词都取消高亮
                this.policy_words.forEach((item) => {
                    if( item['_type_forSelect']=='success' ){
                        item['_type_forSelect'] = this.highlight( item['keyword'], 'success', false );
                    }
                });
                // 标引当前关键词, 并跳转
                obj['_type_forSelect'] = this.highlight( obj['keyword'], obj['_type_forSelect'], true );
            }else{
                obj['_type_forSelect'] = this.highlight( obj['keyword'], 'success', false );
            }
        },
        tagWordAdd(str){
            if( ! (this.curNode && this.curNode.id) ){ this.$message({ message: "请选择框架", type: "error" }); return; }

            if( str ){
                let param={
                    //"id": 1,
                    "keyword": str,
                    "wordFreamIds": [this.curNode.id]
                }
                addWordReal(param).then(res => {
                    console.log('[tagAdd]' ,res);
                    this.policy_words.push( {id:res.result.id, keyword:str} )
                    this.$message({ message: '添加成功！', type: 'success' })
                })
            }
        },
        tagWordDel(key){
            console.log('[tagDel]', key, this.policy_words);
            this.$confirm("确定删除?", {type: "warning"}).then(() => {

                // 删除的是关键词和这个框架的关系, 不是真正的删除关键词

                let obj = this.policy_words[key];
                let wordFreamIds = obj.wordFreamIteams.map(val => {
                    return val.wordFreamLeve4Id || val.wordFreamLeve3Id || val.wordFreamLeve2Id || val.wordFreamLeve1Id;
                });

                const index = wordFreamIds.indexOf( this.curNode.id );
                wordFreamIds.splice(index, 1); 

                let param={
                    id: this.policy_words[key].id,
                    keyword: this.policy_words[key].keyword,
                    add: false,
                    wordFreamIds: wordFreamIds,
                }

                // 提交时的字段: id,add,keyword,wordFreamIds
                addWord( param ).then(res => {
                    this.dialogFormVisible = false
                    this.getWordsList();
                    this.$message({ type: 'success', message: '删除成功' });
                }).catch(error => {
                    this.$message({ type: 'error', message: '修改失败' });
                })
            }).catch(() => {})
        },




        /////////////////////////////////////////////////// 标引语句相关 ///////////////////////////////////////////////////
          // 点击一条标引语句, 在全文中进行高亮。
        tagStateClick(idx){
            console.log('[tagStateClick]', idx, this.policy_statement);
            let obj = this.policy_statement[idx];
            console.log(obj['_type_forSelect'], obj);

            obj['_type_forSelect'] = this.highlight( obj['statements'], obj['_type_forSelect'], true );
        },



          // 添加一条标引语句。 同时更新该政策的标引状态
        tagStateAdd(str){
            if( ! (this.curNode && this.curNode.id) ){ this.$message({ message: "请选择框架", type: "error" }); return; }

            if( str ){
                let param={
                    //"id": 1,
                    statements  : str,
                    wordFreamId : this.curNode.id,
                    policyId    : this.cur_policy_id,
                    region      : this.curRegion,
                }
                matrixAdd(param).then(res => {
                    console.log('[tagStateAdd]' ,res);
                    this.policy_statement.push( {
                        id  : res.result.id || 0,
                        statements  : str,
                        policyId    : this.cur_policy_id,
                        region      : this.curRegion,
                    });
                    this.setMarkState(1);

                    this.$message({ message: '添加成功！', type: 'success' });
                })
            }
        },
        tagStateDel(idx){
            console.log('[tagStateDel]', idx, this.policy_statement);
            let param={id: this.policy_statement[idx].id }
            matrixDel(param).then(res => {
                console.log('[tagStateDel]res: ' ,res);
                this.policy_statement.splice(idx, 1)
                this.$message({ message: '删除成功！', type: 'success' })
            })
        },
        tagStateDel_confirm(idx){
            this.$confirm("您确定删除?", "提示", {
                confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
            }).then(() => {
                this.tagStateDel(idx);
            }).catch(() => {})
        },

          // 更新政策的标引状态。{ '0':'未标引', '1':'未完成', '2':'已完成'}
          // showAlert: true/flase, 是否显示提示信息。
        setMarkState( markState, showAlert=false ){
            if( this.cur_policy_id && this.cur_policy.markState != markState ){
                let param={id: this.cur_policy_id, state:markState }
                setMarkState(param).then(res => {
                    console.log('[setMarkState]res: ' ,res);
                    if(showAlert){
                        this.cur_policy.markState = markState;
                        this.$message({ message: '提交成功！', type: 'success' })
                    }
                });
            }
        },

        mark_done(){
            this.setMarkState(2, true);
        },


        detailArea_getSelectText() {
            if( ! (this.curNode && this.curNode.id) ){ this.$message({ message: "请选择框架", type: "error" }); return; }

            let that = this;
            let str = window.getSelection().toString()
            if( str ){
                if(str.length<10){
                    // 1.当划取内容字符<10个，则弹出添加关键词的窗口提示确认“是否为[人才引进（当前标引的框架）]添加关键词[划取内容]”
                    this.$confirm("是否为【"+this.curNode.title+"】添加关键词【"+str+"】", "提示", {
                        confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
                    }).then(() => {
                        this.tagWordAdd(str);
                    }).catch(() => {})
                }else{
                    // 2.当划取内容字符>=10个，则弹出添加矩阵内容的窗口提示确认“是否为[人才引进（当前标引的框架）]添加矩阵内容[划取内容]”
                    that.$confirm("是否为【"+this.curNode.title+"】添加矩阵内容【"+str+"】", "提示", {
                        confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
                    }).then(() => {
                        that.tagStateAdd(str);
                    }).catch(() => {

                        // 2.2.如果选择否，则再弹出一个新窗口让加工人员确认是“添加新关键词”还是“取消划取内容（误操作）”。
                        that.$confirm("是否添加关键词【"+str+"】", "提示", {
                            confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
                        }).then(() => {
                            that.tagWordAdd(str);
                        }).catch(() => {})
                    })
                }
            }
        },
        detailArea_back(){
            this.treeCountData = {};
            this.updTreeCountWord();
            this.curStep = '2search';
            this.getTableData();
        },

    }
}
</script>

<style lang="less" scoped>
  .mark-matrix {
    display: flex;

    .word-tree {
      width: 250px;
      margin-left: 0;
      border: 1px solid gray;
      padding: 20px;
      border-radius: 5px;
    }

    .rightDiv{
        /*width: 75%;*/
        padding-left: 48px;

        .el-tag{
            margin-right:5px; margin-top:5px;
            cursor:pointer;
        }

        .cur_nodeinfo{
            margin-top:10px;
        }

        .search-area {
            margin-top:10px;
            .search {
                width: 300px;
                display: flex;
                margin-bottom: 24px;
            }
            .search2 {
                /*width: 600px;*/
            }
        }

        .detailArea{
            margin-top:80px;

            /* 已挪到 src/styles/index.scss
            .highlight{}
            .lastHighlight{}
            */
        }

    }





    .keywords-area {
      border: 1px solid gray;
      padding: 24px;

      .area-title {
        margin-bottom: 12px;
      }

      .checkbox {
        margin-bottom: 12px;

      }
    }

    .table-area {
      border: 1px solid gray;
      margin-top: 12px;
    }

  }
</style>
